<template>
    <view class="container">
        <view class="h-40"></view>
        <view class="nft-image">
            <u-image
                :src="nftInfo.img"
                width="360rpx"
                height="360rpx"
                mode="aspectFill"
                radius="10rpx"
                class="u-image"
            ></u-image>
        </view>
        <view class="p-64">
            <u-text
                :text="nftInfo.name"
                size="36rpx"
                align="center"
                margin="40rpx 0 0 0"
                :lines="1"
            ></u-text>
        </view>
        <!--view class="nft-price">
            <u-text
                text="购入价"
                size="28rpx"
                align="right"
                margin="0 8rpx 0 0"
            ></u-text>
            <u-text
                text="29.90"
                size="36rpx"
                prefixIcon="rmb"
                iconStyle="font-size: 26rpx; color: #000000; font-weight: bold;top: 10rpx;"
            ></u-text>
        </view-->
        <view class="p-64">
            <view class="h-20"></view>
            <u-divider
                text="编号选择"
                textSize="26rpx"
                textColor="#4A4A4A"
                lineColor="#B6B6B6"
            ></u-divider>
            <view class="select-nft" v-if="choiceNftCode" @click="$u.route('pages_v2/hangingSale/collection', {nftId: nftInfo.id})">
                {{ choiceNftCode.code }}#{{ nftInfo.total }}
                <view class="icon-right">
                    <u-icon
                        name="arrow-right"
                        size="30rpx"
                    ></u-icon>
                </view>
            </view>
            <view class="unselect-nft" v-else @click="$u.route('pages_v2/hangingSale/collection', {nftId: nftInfo.id})">
                请选择编号
                <view class="icon-right">
                    <u-icon
                            name="arrow-right"
                            size="30rpx"
                    ></u-icon>
                </view>
            </view>
            <view class="h-20"></view>
            <u-divider
                text="挂售价格"
                textSize="26rpx"
                textColor="#4A4A4A"
                lineColor="#B6B6B6"
            ></u-divider>
            <u-input
                placeholder="请输入挂售价格"
                border="none"
                v-model="sellerPrice"
                fontSize="28rpx"
                color="#000000"
                type="number"
                inputAlign="center"
                :customStyle="{
                    padding: '20rpx',
                    background: '#EEEEEE',
                    borderRadius: '50rpx'
                }"
                @change="inputValue"
                placeholderStyle="color: '#888888'"
            ></u-input>
        </view>
        <view class="bottom">
            <view class="my-money">
                <view class="my-money-label">预计所得</view>
                <u-text
                    :text="incomeMoney"
                    size="34rpx"
                    bold
                    color="#000000"
                    prefixIcon="rmb"
                    iconStyle="font-size: 30rpx; color: #000000; font-weight: bold;top: 4rpx;"

                ></u-text>
            </view>
            <view class="seller-fee">交易手续费：{{ exchangeFeeRate }} %</view>
            <view class="seller-action">
                <view class="seller-point">
                    <view class="seller-point-num">{{ sellerPoint }}</view>
                    <view class="seller-point-utils">金豆</view>
                </view>
                <view class="seller-btn-confirm" @click="$u.throttle(onsubmit, 2000)">立即挂售</view>
            </view>
        </view>
    </view>
</template>

<script>
    import { submitSell } from "@/config/api-java"
    import { getCollectInfo } from "@/config/api"
    export default {
        name: "index",
        data() {
          return {
              sellerPrice: null,
              nftInfo: {},
              sellerPoint: 0
          }
        },
        computed: {
            exchangeFeeRate() {
                return this.$store.getters.exchangeFeeRate * 100
            },
            choiceNftCode() {
                return this.$store.getters.choiceNftCode
            },
            incomeMoney() {
                return this.sellerPrice - Math.ceil(this.$store.getters.exchangeFeeRate * this.sellerPrice * 100)/100
            }
        },
        async onLoad(option) {
            const res = await getCollectInfo({nftId: option.nftId})
            this.nftInfo = res.nft
            this.$store.dispatch("user/setChoiceNftCode", null)
        },
        methods: {
            inputValue(val) {
                this.sellerPoint = Math.ceil(this.$store.getters.exchangePointRate * val * 100)/100
            },
            async onsubmit() {
                var data = {
                    code: this.$store.getters.choiceNftCode.code,
                    money: this.sellerPrice,
                    nftId: this.nftInfo.id,
                    point: this.sellerPoint
                }
                const res = await submitSell(data)
                this.$u.toast("挂售成功")
                setTimeout(() => {
                    uni.$u.route({
                        type: "navigateBack"
                    })
                }, 1500)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        .h-40 {
            height: 40rpx;
        }
        .h-20 {
            height: 20rpx;
        }
        .nft-image {
            width: 360rpx;
            margin: auto;
        }
        .p-64 {
            padding: 0 64rpx;
        }
        .nft-price {
            display: flex;
            justify-content: center;
            margin-top: 30rpx;
        }
        .select-nft {
            height: 80rpx;
            background: #EEEEEE;
            border-radius: 40rpx;
            font-size: 28rpx;
            font-family: PingFang-SC-Bold, PingFang-SC;
            font-weight: bold;
            color: #000000;
            line-height: 80rpx;
            text-align: center;
            position: relative;
            .icon-right {
                position: absolute;
                right: 42rpx;
                top: 25rpx;
            }
        }
        .unselect-nft {
            height: 80rpx;
            background: #EEEEEE;
            border-radius: 40rpx;
            font-size: 28rpx;
            font-family: PingFang-SC-Bold, PingFang-SC;
            color: #888888;
            line-height: 80rpx;
            text-align: center;
            position: relative;
            .icon-right {
                position: absolute;
                right: 42rpx;
                top: 25rpx;
            }
        }
        .bottom {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            .seller-fee {
                height: 50rpx;
                background: #F0F3FD;
                font-size: 22rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #356CE7;
                line-height: 50rpx;
                text-align: center;
            }
            .seller-action {
                height: 100rpx;
                background: #000000;
                display: flex;
                justify-content: space-between;
                padding: 0 40rpx;
                .seller-point {
                    display: flex;
                    align-items: center;
                    .seller-point-num {
                        font-size: 40rpx;
                        font-family: DINAlternate-Bold, DINAlternate;
                        font-weight: bold;
                        color: #FFFFFF;
                    }
                    .seller-point-utils {
                        margin-left: 15rpx;
                        font-size: 26rpx;
                        font-family: PingFangSC-Semibold, PingFang SC;
                        font-weight: 600;
                        color: #FFFFFF;
                    }
                }
                .seller-btn-confirm {
                    margin-right: 42rpx;
                    font-size: 30rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #FFFFFF;
                    line-height: 64rpx;
                    padding-left: 83rpx;
                    border-left: 1px solid #878787;
                    margin-top: 18rpx;
                    margin-bottom: 18rpx;
                }
            }
            .my-money {
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 30rpx;
                .my-money-label {
                    margin-right: 26rpx;
                    flex: 1;
                    font-size: 24rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #4A4A4A;
                    text-align: right;
                }
            }
        }
    }
</style>
